﻿<MudPopoverProvider />

<MudGrid>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Anchor Origin</MudText>
        <MudRadioGroup T="Origin" @bind-Value="_anchorOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="6" Class="d-flex justify-center align-center">
        <MudBadge Origin="@_anchorOrigin" Color="Color.Primary" Dot="true" Overlap="true" Elevation="4" BadgeClass="ma-2">
            <MudPaper Elevation="0" Outlined="true" Class="pa-12">
                <MudPopover OverflowBehavior="OverflowBehavior.FlipNever" Open="true" AnchorOrigin="@_anchorOrigin" TransformOrigin="@_transformOrigin" Class="pa-4">
                    <MudText Typo="Typo.body2" Class="px-4 py-1">The content of the popover</MudText>
                    <div class="@GetLocation()" style="top:0; left:0;">
                        <MudIcon Icon="@GetIcon()" Color="Color.Secondary" Class="" />
                    </div>
                </MudPopover>
            </MudPaper>
        </MudBadge>
    </MudItem>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Transform Origin</MudText>
        <MudRadioGroup T="Origin" @bind-Value="_transformOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

@code {
    public static string __description__ = "Popover Direction and Location Test";

    private Origin _transformOrigin = Origin.TopLeft;
    private Origin _anchorOrigin = Origin.BottomLeft;

    private string GetIcon()
    {
        var icon = _transformOrigin switch
        {
            Origin.TopLeft => Icons.Material.Filled.SouthEast,
            Origin.TopCenter => Icons.Material.Filled.South,
            Origin.TopRight => Icons.Material.Filled.SouthWest,
            Origin.CenterLeft => Icons.Material.Filled.East,
            Origin.CenterCenter => Icons.Material.Filled.ZoomOutMap,
            Origin.CenterRight => Icons.Material.Filled.West,
            Origin.BottomLeft => Icons.Material.Filled.NorthEast,
            Origin.BottomCenter => Icons.Material.Filled.North,
            Origin.BottomRight => Icons.Material.Filled.NorthWest,
            _ => ""
        };
        return icon;
    }

    private string GetLocation()
    {
        var align = string.Empty;
        var justify = string.Empty;
        var pos = _transformOrigin.ToDescriptionString().Split("-");

        align = pos[0] switch
        {
            "center" => "align-center",
            "top" => "align-start",
            "bottom" => "align-end",
            _ => align
        };
        justify = pos[1] switch
        {
            "left" => "justify-start",
            "right" => "justify-end",
            "center" => "justify-center",
            _ => justify
        };

        return $"absolute mud-height-full mud-width-full d-flex {align} {justify}";
    }
}
